<template>
  <div class="ctg-nav">
    <CtgNavItem v-for="nav in navs" :key="nav.id" :title="nav.title" :desc="nav.desc"
      :link-text="nav.linkText" :img="nav.img"></CtgNavItem>
  </div>
</template>
<script setup>

import { onMounted, ref } from 'vue';

import CtgNavItem from './CtgNavItem.vue';

import { getNavsApi } from '../api/a1';

const navs = ref([]);

async function getNavs() {
  const { data } = await getNavsApi();
  navs.value = data;
}
onMounted(() => {
  getNavs();
});

// const navs = ref([
//   {
//     id: 1, title: 'title1', desc: 'hello title1', linkText: 'linkText1',
//   },
//   {
//     id: 2, title: 'title1', desc: 'hello title1', linkText: 'linkText1',
//   },
//   {
//     id: 3, title: 'title1', desc: 'hello title1', linkText: 'linkText1',
//   },
// ]);

</script>
